<template>
  <div class="personMessage">
    <p>修改个人信息</p>
    <div>
      <el-form :model="messageForm" ref="messageForm" label-width="100px">
        <el-form-item prop="avatarUrl" label="头像上传">
          <el-upload
            ref="upload"
            :action="href"
            :show-file-list="false"
            name="avatar"
            :on-success="handleAvatarSuccess"
            :on-error="error"
            :auto-upload="false"
            :data="messageForm"
            :on-change="beforeAvatarUpload"
          >
            <img
              v-if="messageForm.avatar"
              :src="messageForm.avatar"
              class="avatar"
            />
            <img
              v-else
              src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
              class="avatar"
            />
          </el-upload>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input
            v-model="messageForm.nickname"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="intro">
          <el-input
            type="textarea"
            v-model="messageForm.intro"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="determine">确定</el-button>
          <el-button type="info" @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { modify, getAuthorInfo } from "@/api/userApi";
import infiniteScroll from "vue-infinite-scroll";
export default {
  directives: { infiniteScroll },
  data() {
    return {
      href: "http://10.24.17.72:8080/api/user/modify",
      messageForm: {
        nickname: "",
        intro: "",
        avatar: sessionStorage.getItem("avatar"),
        userId: sessionStorage.getItem("id"),
      },
    };
  },
  methods: {
    //获取头像
    handleAvatarSuccess(res, file) {
       sessionStorage.clear();
      this.$router.push({ name: "dashboard" });

      location.reload();
            this.$message({
        message: "修改成功，请重新登陆",
        type: "success",
      });
    },

    beforeAvatarUpload(file, fileList) {
      this.messageForm.avatar = URL.createObjectURL(file.raw);
    },
    // 确定
    determine() {
      this.$refs.upload.submit();
    },

    //获取用户信息
    getAuthorInfo() {
      getAuthorInfo(this.messageForm.userId)
        .then((res) => {
          // console.log("sddd",res)
          this.messageForm = res.data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },

    error(err) {
      this.$message({
        message: "修改失败！",
        type: "success",
      });
      console.log(err);
    },

    //清空表单
    resetForm() {
      this.$refs.messageForm.resetFields();
    },
  },

  mounted() {
    this.getAuthorInfo();
  },

  created() {},
};
</script>

<style>
.personMessage {
  width: 1200px;
  margin: 0 auto;
  padding: 14px;
}

.personMessage p {
  height: 30px;
  font-weight: 700;
}

.modify-avatar a:hover {
  color: #00a1d6;
  cursor: pointer;
}

.hiddenInput {
  display: none;
}

.personMessage .avatar {
  width: 100px;
  height: 100px;
}
</style>
